<template>
  <div class="home-info">
    <div class="wrapper">
      <div class="feature">
        <p>
          <span class="key-word simple">简约</span>
          <span class="key-word easy">好用</span>
          <span class="key-word free">免费</span>
        </p>
        <p class="slogan">腾讯问卷问你提供专业调研服务</p>
      </div>
      <div class="contact-us">
        <p class="advice">任何建议和问题随时
          <router-link id="tgc" to="/">吐个槽</router-link></p>
        <p class="about-us">
          官方邮箱：<router-link to="/">wj@tencent.com</router-link><br />
          官方微博：<router-link>腾讯问卷:</router-link>
          <br />官方QQ群：<router-link to="/">365694489</router-link><br />
          客服QQ：<router-link to="/">365694489</router-link>
        </p>
      </div>
      <div class="wx-qrcode">
        <img src="https://wj.qq.com/image/wx_public_qr_code.png?v=@version" />
        <p>扫描关注微信公众号</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.home-info {
  background-color: #f5f5f5;
  padding: 38px 0 20px;
}
.wrapper {
  width: 1000px;
  box-sizing: border-box;
  margin: auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.key-word {
  line-height: 24px;
  padding: 15px 0 15px 60px;
  margin-right: 20px;
  font-size: 20px;
  color: #58a6e7;
  display: inline-block;
}
.simple {
  background-image: url(https://cdn.ur.qq.com/image/icon_simple.png?v=1.9.80);
  background-repeat: no-repeat;
}
.easy {
  background-image: url(https://cdn.ur.qq.com/image/icon_easy.png?v=1.9.80);
  background-repeat: no-repeat;
}
.free {
  background-image: url(https://cdn.ur.qq.com/image/icon_free.png?v=1.9.80);
  background-repeat: no-repeat;
}
.slogan {
  margin-top: 22px;
  color: #999;
  font-size: 22px;
}
p {
  margin: 0;
  padding: 0;
}
.contact-us {
  width: 230px;
  margin-left: 127px;
  margin-right: 92px;
  display: inline-block;
  color: #999;
  font-size: 13px;
  vertical-align: top;
}
.contact-us a{
  color: #333;
}
a {
  text-decoration: none;
  color: #58a6e7;
}
.wx-qrcode {
  text-align: center;
  width: 130px;
  color: #999;
  font-size: 13px;
}
.about-us {
  font-size: 13px;
  margin-top: 18px;
  line-height: 190%;
}
.about-us a:hover{
  color: #58a6e7;
}
.advice{
  font-size: 16px;
}
#tgc{
  color: #58a6e7;
}
</style>
